<template>
    <div class="sortBoxContainer">
        <el-popover placement="bottom" width="350px" height="50px" @show="showSortPop" :show-arrow="false" v-model="isSortPopShow"
            trigger="click">
            <template #reference>
                <div class="sortBox" slot="reference">
                    {{ currentTag.name }}<i class="iconfont icon-youjiantou"></i>
                </div>
            </template>
            <div class="tips" v-if="sortList.length == 0">正在加载分类数据...</div>
            <div class="sortList" v-else>
                <div class="sortItem" :class="currentTag.name == item.name ? 'currentItem' : ''"
                    v-for="(item, index) in sortList" :key="index" @click="clickItem(item)">
                    {{ item.name }}
                </div>
            </div>
        </el-popover>

    </div>
</template>

<script setup>
import { defineProps, ref, defineEmits } from 'vue'

const props = defineProps({
    currentTag: {
        type: Object,
        defalult () {
            return {}
        },
    },
    sortList: {
        type: Array,
        defalult () {
            return []
        },
    },
})
const emit = defineEmits(['clickSortBoxItem', 'getSortList'])

const isSortPopShow = ref(false)

//pop展示时的回调
const showSortPop = () => {
    // 判断sortList是否有数据
    if (props.sortList.length == 0) {
        emit("getSortList")
    }
}

//点击item的回调
const clickItem = (item) => {
    emit('clickSortBoxItem', item)
}
</script>

<style lang="scss" scoped>
.sortBox {
    padding: 5px 10px;
    border: 1px solid #ddd;
    border-radius: 20px;
    cursor: pointer;

    i {
        font-size: 14px;
    }
}
.tips{
    width: 100%;
    text-align: center;
    font-size: 14px;
    padding: 20px 0;
    color: rgb(145,145,145);
}
.sortList{
    display: flex;
    flex-wrap: wrap;
    height: 250px;
    overflow: scroll;
    .sortItem{
        font-size: px;
        width: 25%;
        text-align: center;
        color: rgb(85,85,85);
        padding: 5px 0;
        margin: 5px 0;
        cursor: pointer;
        border-radius: 30px;
    }
}
.currentItem{
color: #eb4f4f;
    background-color: #fcebeb;
}
</style>
